<template>
  <content-field>
    <n-card>
      <template #header>标签列表</template>
      <template #header-extra v-if="$store.state.user.is_staff"
        ><n-switch v-model:value="is_edit">
          <template #checked> 管理 </template>
          <template #unchecked> 查看 </template>
        </n-switch></template
      >
      <n-space size="small">
        <n-tag
          v-for="badge of $store.state.badge.list"
          :key="badge.id"
          :type="badge.type"
          :round="!is_edit"
          style="cursor: pointer"
          @click="is_edit ? editBadge(badge.id) : to_badge_content(badge.id)"
        >
          {{ badge.name }}</n-tag
        >
        <!-- TODO: 一个带弹窗的版本，感觉不是很好搁置了 -->
        <!-- <n-tooltip
        v-for="badge of $store.state.badge.list"
        :key="badge.id"
        trigger="hover"
        :show-arrow="false"
      >
        <template #trigger
          ><n-tag
            :type="badge.type"
            :round="!is_edit"
            style="cursor: pointer"
            @click="is_edit ? editBadge(badge.id) : alert('hhh')"
          >
            {{ badge.name }}</n-tag
          ></template
        >
        {{ badge.brief }}
      </n-tooltip> -->
      </n-space>
      <badge-edit-view ref="badgeEdit" :id="selectid" />
    </n-card>
  </content-field>
</template>

<script>
import { ref } from "@vue/reactivity";
import BadgeEditView from "../edit/BadgeEditView.vue";
import { NSwitch } from "naive-ui";
import routerJump from "@/composables/RouterJump";
import ContentField from "@/components/ContentField.vue";

export default {
  components: { BadgeEditView, NSwitch, ContentField },
  setup() {
    let selectid = ref(-1);
    let is_edit = ref(false);
    const badgeEdit = ref(null); // 子组件ref

    const { to_badge_content } = routerJump();
    const editBadge = (id) => {
      selectid.value = id;
      badgeEdit.value.getBadgeData(id);
      badgeEdit.value.showModal = true;
    };
    return {
      selectid,
      editBadge,
      badgeEdit,
      is_edit,
      to_badge_content,
    };
  },
};
</script>

<style>
</style>